<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1" />
		<title></title>
		<style type="text/css">
			.rec:hover{
				background: red;
			}
		</style>
	</head>

	<body>
		<div id="border" style="width: 600px; height: 300px; margin: 0; padding: 0; top: 0px; left: 0; background: url(img/beijing.jpg);">
		<div id="rec" class="rec" style="position: absolute; left: 276px; top: 128px; width: 100px; height:100px;background: url(img/fen-1.png) no-repeat; border-radius: 20%; opacity: ;"></div>
	    
	</body>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		var rec = document.getElementById("rec");
		var down = false;
		var dx = 0; //鼠标指针的水平坐标
		var dy = 0; //鼠标指针的垂直坐标
		var sx = 0; //物体的水平坐标
		var sy = 0; //物体的垂直坐标
		document.onmousemove = function(e) {
			if(down) { //鼠标停止移动时，物体的位置
				var ev = e || event;//获得event事件兼容性写法
				rec.style.top = ev.clientY - (dy - sy) + "px"; //鼠标停止移动时，物体的位置=鼠标位置-【物体的高度=>（鼠标位置-物体位置）】
				rec.style.left = ev.clientX - (dx - sx) + "px";
				if(parseInt(rec.style.top) <= 10) {

					rec.style.top = 10 + "px";

				}
				if(parseInt(rec.style.left) <= 10) {
					rec.style.left = 10 + "px";
				}
				if(parseInt(rec.style.left) >= 560) {
					rec.style.left = 560 + "px";
				}
				if(parseInt(rec.style.top) >= 210) {
					rec.style.top = 210 + "px";
				}

			}
		}

		rec.onmousedown = function() {
			dy = event.clientY;
			dx = event.clientX;
			sy = parseInt(rec.style.top);
			sx = parseInt(rec.style.left);

		
		if(!down) { //鼠标按下，down为true，触发鼠标移动事件
			down = true;
		}
		}
		document.onmouseup = function() { //鼠标松开，鼠标移动事件停止
			if(down) {
				down = false;

			}
		}
		rec.onmouseover=function(){
			rec.style.background="url(img/fen-2.png) no-repeat";
		}
		rec.onmouseout=function(){
			rec.style.background="url(img/fen-1.png) no-repeat";
		}
	</script>

</html>